<template>
  <div class="m-bread">
    <span style="margin: 0 3px;" class="spanfront">{{ titleList[0] }}</span>
    <span v-for="(title, index) in titleList" :key="index" class="spanother">{{ index > 0 ? (" / " + title) : "" }}</span>
  </div>
</template>

<script>
import { computed } from "vue"
export default {
  name: "MBreadcrumb",
  props: {
    item: {
      type: Object,
      required: false
    }
  },

  setup(props) {
    function extractTitles(e) {
      const result = [];
      const data = e
      if (data.title) {
        result.push(data.title);
      }

      if (data.children) {
        if (Array.isArray(data.children)) {
          data.children.forEach(child => {
            result.push(...extractTitles(child));
          });
        } else {
          result.push(...extractTitles(data.children));
        }
      }
      return result;
    }
    const titleList = computed(() => extractTitles(props.item));

    return {
      titleList,
    };
  },
};
</script>

<style scoped>
.m-bread {
  box-sizing: border-box;
}

.spanfront {
  font-family: 'DingTalk';
  font-size: 18px;
  color: #000000;
  font-weight: 400;
}

.spanother {
  font-family: 'DingTalk';
  font-size: 18px;
  color: #525252;
  font-weight: 400;
}
</style>
